<script>
	// 防抖
	import {
		throttle,
	} from "@/util"

	export default {
		name: "uni-byt-pay",
		// success支付成功，fail支付失败，cancel支付取消，close关闭弹窗，open打开弹窗回调,createOrder创建支付
		emits: ["success", "fail", "cancel", "close", "open", "createOrder"],
		props: {
			/**
			 * 收银台高度（默认60vh）
			 */
			height: {
				type: String,
				default: "60vh"
			},
			// 样式
			styleName: {
				type: String,
				default: ""
			},
			//支付方式
			paymentMethod: {
				type: Array,
				default: () => ["wxpay", "alipay"]
			},
			// 模拟展示支付宝支付
			appShow: {
				type: Boolean,
				default: false
			},
			// 支付金额
			money: {
				type: Number,
				default: 0
			},
			// 按钮文字
			btnName: {
				type: String,
				default: "打开弹窗"
			},
			// 按钮样式
			btnStyleName: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				// 图标
				images: {
					wxpay: "",
					alipay: ""
				},
				// 支付方式
				provider: ''
			}
		},
		methods: {
			// 打开弹窗
			openPopup(name) {
				if (!this.$refs[name].showPopup) {
					this.$refs[name].open()
					this.$emit("open")
				}
			},
			// 关闭弹窗
			closePopup(name) {
				this.$refs[name].close();
				this.$emit("close")
			},
			// 创建支付
			createOrder: throttle(async function(provider) {
				// 支付方式
				this.provider = provider
				this.$emit('createOrder', provider)
			}, 1500),
			// 调起支付
			orderPayment: throttle(function(resData = {}) {
				console.log("调起支付:", resData);
				// 支付方式
				const provider = this.provider
				if (resData.payData) {
					// #ifdef H5
					if (resData.payDataType == "jsapi") {
						resData.payData = JSON.parse(resData.payData)
						// 微信公众号支付
						WeixinJSBridge.invoke("getBrandWCPayRequest", resData.payData, (res) => {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								this.$emit("success", res)
								this.closePopup('payPopup')
							} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
								// 用户取消支付回调
								this.$emit("cancel", res);
							} else if (res.err_msg == "get_brand_wcpay_request:fail") {
								// 用户支付失败回调
								console.error('getBrandWCPayRequest-fail: ', res);
								this.$emit("fail", res);
							}
						});
					} else {
						console.error("H5支付只支持jsapi方式");
						throw 'H5支付只支持jsapi方式'
					}
					// #endif
					// #ifndef H5
					// 微信的参数字段必须全部小写才能唤起控件，所以需要将驼峰命名转格式

					if (provider == 'wxpay') {
						// #ifdef APP-PLUS
						const payData = JSON.parse(resData.payData)
						resData.payData = {
							"package": payData.package,
							"appid": payData.appid || payData.appId,
							"sign": payData.sign,
							"partnerid": payData.partnerid || payData.partnerId,
							"prepayid": payData.prepayid || payData.prepayId,
							"noncestr": payData.noncestr,
							"timestamp": payData.timestamp
						}
						// #endif
						// #ifdef MP-WEIXIN
						resData.payData = JSON.parse(resData.payData)
						// #endif
					}

					console.log("调取支付控件2：", provider, resData.payData, );
					uni.requestPayment({
						// #ifdef APP-PLUS
						provider: provider, // App端此参数必填，可以通过uni.getProvider获取
						// #endif
						// #ifdef APP-PLUS || MP-ALIPAY
						orderInfo: resData.payData,
						// #endif
						...resData.payData,
						success: (res) => {
							this.$emit("success", res)
							this.closePopup('payPopup')
						},
						fail: (err) => {
							if (err.errMsg.indexOf("fail cancel") == -1) {
								// 发起支付失败
								console.error("uni.requestPayment:fail", err);
								this.$emit("fail", err);
							} else {
								// 用户取消支付
								this.$emit("cancel", err);
							}
						}
					});
					// #endif
				} else {
					// 发起支付失败
					console.error("发起支付失败,参数为空");
					throw '发起支付失败,参数为空'
				}
			}, 1500)
		},
	}
</script>

<template>
	<view>
		<!-- 移动端版收银台弹窗 -->
		<button class="buttom-style" @click="openPopup('payPopup')" :style="btnStyleName">{{btnName}}</button>

		<uni-popup ref="payPopup" type="bottom" :safe-area="false" @maskClick="closePopup('payPopup')">
			<view class="mobile-pay-popup" :style="'min-height: '+height+';'+ styleName">
				<view class="mobile-pay-popup-amount-box">
					<view class="mobile-pay-popup-amount">
						<view class="mobile-pay-popup-amount-item">
							<view class="mobile-pay-popup-amount-item-view">
								<text class="mobile-pay-popup-amount-item-view-text">￥</text>
								<text>{{ money }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="mobile-pay-popup-provider-list">
					<view class="mobile-pay-popup-provider-list-box">
						<!-- #ifdef MP-WEIXIN || H5 || APP -->
						<view v-if="paymentMethod.some(item=>item=='wxpay')" @click="createOrder('wxpay')"
							class="mobile-pay-popup-provider-list-box-item">
							<view class="list-box-item-left">
								<image class="list-box-item-left-img" :src="images.wxpay" mode=""></image>
								<text class="list-box-item-left-text">微信支付</text>
							</view>
							<view class="list-box-item-right">
								<image class="list-box-item-left-img2"
									src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifdef APP -->
						<view v-if="paymentMethod.some(item=>item=='alipay')" @click="createOrder('alipay')"
							class="mobile-pay-popup-provider-list-box-item">
							<view class="list-box-item-left">
								<image class="list-box-item-left-img" :src="images.alipay" mode=""></image>
								<text class="list-box-item-left-text">支付宝支付</text>
							</view>
							<view class="list-box-item-right">
								<image class="list-box-item-left-img2"
									src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
							</view>
						</view>
						<!-- #endif -->

						<!-- 此功能为在H5页面模拟展示支付宝支付样式 -->
						<!-- #ifdef H5 -->
						<view v-if="paymentMethod.some(item=>item=='alipay')&&appShow" @click="createOrder('alipay')"
							class="mobile-pay-popup-provider-list-box-item">
							<view class="list-box-item-left">
								<image class="list-box-item-left-img" :src="images.alipay" mode=""></image>
								<text class="list-box-item-left-text">支付宝支付</text>
							</view>
							<view class="list-box-item-right">
								<image class="list-box-item-left-img2"
									src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
							</view>
						</view>
						<!-- #endif -->

					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>


<style lang="scss" scoped>
	/* 手机版收银台弹窗开始 */
	.buttom-style {
		outline: none;
		border-radius: 8px;
		background-color: #3852f6;
		color: white;
		font-size: 28rpx;
	}

	.mobile-pay-popup {
		min-height: 70vh;
		background-color: #f3f3f3;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;

		.mobile-pay-popup-title {
			background-color: #ffffff;
			text-align: center;
			font-weight: bold;
			font-size: 40rpx;
			padding: 20rpx;
		}

		.mobile-pay-popup-amount-box {
			background-color: #ffffff;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 72rpx;
			font-weight: bold;

			.mobile-pay-popup-amount {
				color: #e43d33;
				font-size: 60rpx;
				margin-top: 20rpx;

				.mobile-pay-popup-amount-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.mobile-pay-popup-amount-item-view {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: flex-end;

						.mobile-pay-popup-amount-item-view-text {
							font-size: 36rpx;
							margin-bottom: 10rpx;
						}
					}
				}

			}
		}

		.mobile-pay-popup-provider-list {
			margin-top: 20rpx;

			.mobile-pay-popup-provider-list-box {
				display: flex;
				flex-direction: column;

				.mobile-pay-popup-provider-list-box-item {
					background-color: #ffffff;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					padding: 12px 30rpx;
					margin-bottom: 12px;

					.list-box-item-left {
						display: flex;
						flex-direction: row;
						align-items: center;

						.list-box-item-left-img {
							width: 52rpx;
							height: 52rpx;
							margin-right: 24rpx;
						}

						.list-box-item-left-text {
							font-size: 28rpx;
						}

					}

					.list-box-item-right {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;

						.list-box-item-left-img2 {
							width: 32rpx;
							height: 32rpx;
						}
					}

				}
			}
		}
	}

	/* 手机版收银台弹窗结束 */
</style>